<template>
  <div class="review-detail">
    <div class="content-box">
      <!-- 显示当前的内容 -->
      {{ content }}
    </div>

    <div class="action-buttons">
      <!-- 点击按钮触发自定义事件，发射给父组件，父组件根据事件名称判断是执行通过还是拒绝操作 -->
      <el-button type="primary" @click="$emit('submit', 'approve')">通过</el-button>
      <el-button type="danger" @click="$emit('submit', 'reject')">拒绝</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 获取父组件传递的属性
defineProps<{
  content: string
}>()

// 声明自定义事件有哪些？template中将通过特殊事件发送对应的事件给父组件完成 子 -> 父
defineEmits<{
  (e: 'submit', action: 'approve' | 'reject'): void
  (e: 'cancel'): void
}>()
</script>

<style scoped>
.review-detail {
  padding: 10px; /* 内边距10px */
}
.content-box {
  padding: 15px; /* 内边距15px */
  margin-bottom: 20px; /* 底部外边距20px */
  border: 1px solid #eee; /* 边框1px，颜色#eee */
  border-radius: 4px; /* 圆角4px */
  min-height: 200px; /* 最小高度200px */
  max-height: 400px; /* 最大高度400px */
  overflow-y: auto; /* 垂直滚动 */
}
.action-buttons {
  display: flex; /* 弹性布局 */
  justify-content: flex-end; /* 按钮居右显示 */
  gap: 10px; /* 按钮间距10px */
}
</style>
